<!doctype html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport"
	      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<script src="lib/vue.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="lib/element-ui.js" type="text/javascript" charset="utf-8"></script>
	<script src="lib/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="lib/jquery.md5.js" type="text/javascript" charset="utf-8"></script>
	<link rel="stylesheet" type="text/css" href="lib/element-ui.css"/>
	<link rel="stylesheet" type="text/css" href="css/ask.css"/>
	<link rel="stylesheet" type="text/css" href="css/index.css"/>
	<title>在线考核平台</title>
</head>
<body>
<div id="app">
	<header>
		<div class="header">
			<div><a href="/"><img class="img-logo" src="lib/logo1.png" alt=""></a></div>
			<div class="plane-login">
				<div v-show="islogin==0">
					<a href="#" @click="showLoginWindow=true">登录</a> | <a href="register.html">注册</a>
				</div>
				<div v-show="islogin==1">
					<el-menu :default-active="menuActiveIndex" class="el-menu-demo" mode="horizontal">
						<el-submenu index="2">
							<template slot="title"><img
									src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" alt=""
									class="nav-avatar" style="font-weight: bold">{{loginInfo.username}}
							</template>
							<el-menu-item index="2-1">个人中心</el-menu-item>
							<el-menu-item index="2-2">设置</el-menu-item>
							<el-menu-item index="2-3" @click="exit">退出登录</el-menu-item>
						</el-submenu>
					</el-menu>
				</div>
			</div>
		</div>
	</header>
	<main>
		<div class="content" v-for="ansList in ansData">
			<div class="ask-title">
				<h1 v-cloak class="el-icon-star-off" @click="likesAdd(ansList.answer_id)">{{ansList.answer_likes}}</h1>
			</div>
			<div class="ask-meta">
				<div class="ask-meta-info">
					<el-tag effect="dark" hit="true" style="border: none"
					        size="mini" :color="ansData.classcolor">{{ansList.answer_id}}
					</el-tag>
					<span class="ask-meta-span"><i class="el-icon-user-solid"></i> {{curAnswerUser}}</span>
					<span class="ask-meta-span ask-creattime"> <i
							class="el-icon-time"></i> {{ansList.answer_date}}</span>
				</div>

				<div class="ask-control" v-show="1==loginInfo.role">
					<i class="el-icon-edit-outline">
						<a :href="'updateask.html?ask='+ansData.problem_id">编辑</a></i>
					<i class="el-icon-delete" @click="delProblem">删除</i>
				</div>
			</div>
			<div class="ask-content" v-html="ansList.problem_answer">

			</div>

			<div class="plane plane-control">
				<div class="plane-note" v-show="1==loginInfo.role">
					<p>●请点击右边按钮</p> ●
					<p>查看或发布评语●</p>
				</div>
				<div class="plane-control-btn">
					<div class="box-control" v-show="1==islogin">
						<el-popover
								placement="bottom"
								width="600"
								trigger="click"
								>
							<div>{{comment.comment_content}}</div>
							<div>{{comment.comment_date}}</div>
							<a slot="reference" @click="getComment(ansList.answer_id)"><b><i class="el-icon-view"></i></b> 查看评语</a>
						</el-popover>
<!--						<a href="newask.html"><b><i class="el-icon-view"></i></b> 查看评语</a>-->
					</div>
					<div class="box-control" v-show="1==loginInfo.role">
						<a :href="'newcomment.html?answer='+ansList.answer_id"><b><i class="el-icon-edit"></i></b> 发布评语</a>
					</div>
				</div>
			</div>
		</div>
		<transition name="el-zoom-in-center">
			<div class="window-plane-login" v-show="showLoginWindow">
				<div class="box-mask"></div>
				<div class="box-login">
					<div class="plane-login-title">
						<div><b>登录账户</b></div>
						<div @click="closeLoginPlane"><i class="el-icon-close close"></i></div>
					</div>
					<div class="box-login-form">
						<div class="form-item">
							<el-input v-model="form.username" name="username" placeholder="账号"></el-input>
						</div>
						<div class="form-item">
							<el-input v-model="form.password" name="password" placeholder="密码" show-password></el-input>
						</div>
						<div class="form-item form-set-right">
							<a href="#">忘记密码</a> | <a href="#">无法登录</a>
						</div>
						<div class="form-item form-set-right">
							<el-button type="primary" @click="login">登录</el-button>
						</div>
					</div>
				</div>
			</div>
		</transition>
	</main>
	<footer class="fixed-bottom">
		<div class="plane-footer">
			在线考核平台 code by zcpsama
		</div>
	</footer>
	<script>

        (function ($) {
            $.getUrlParam = function (name) {
                var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
                var r = window.location.search.substr(1).match(reg);
                if (r != null) return unescape(r[2]);
                return null;
            }
        })(jQuery);
        var vue = new Vue({
                el: '#app',
                mounted() {
                    this.init()
                },
                data: {
                    askId:'',
                    userOb: {},
                    ansData: [],
                    form: {
                        username: '',
                        password: ''
                    },
                    menuActiveIndex: 1,
                    islogin: 0,
                    loginInfo: {},
                    curAnswerUser: '',
                    showLoginWindow: false,
                    visible: false,
	                comment:{}
                },
                methods: {

                    init() {
                        if ($.getUrlParam('ask') == null) {
                            return;
                        }
                        var that = this;
                        that.askId = $.getUrlParam('ask');
                        $.get('/user/loginInfo', function (data) {
                            if (data != 0) {
                                that.loginInfo = JSON.parse(data);
                                that.islogin = 1;
                            }
                        });
                        $.get('/getAnswerByProblemId', {id: $.getUrlParam('ask')}, function (data) {
                            if (data == null) {
                                window.location.href = '/pages/error/index.html';
                            }
                            let objs = JSON.parse(data);
                            for(let obj in objs) {
                                objs[obj].problem_answer= htmlDecode(objs[obj].problem_answer);
                            }
                            // obj.problem_content = htmlDecode(obj.problem_content);
                            that.ansData = objs;
                        });
                        $.get('/getCurAnswerUser', {id: $.getUrlParam('ask')}, function (data) {
                            that.curAnswerUser = data;
                        });
                    },
                    likesAdd(id){
                        $.get('/answer/likes', {answer_id: id}, function (data) {

                        });

                    },
	                getComment(id){
                        let that = this;
                        $.get('/comment/getCommentByAnswerID', {answer_id: id}, function (data) {
                            if(data==null){
                                that.comment=null;
                            }
                            let obj = JSON.parse(data);
                            obj.comment_content = htmlDecode(obj.comment_content);
                            that.comment=obj;
                        });
	                },
                    delProblem() {
                        let that = this;
                        this.$confirm('此操作将永久删除问题, 是否继续?', '提示', {
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                            type: 'warning'
                        }).then(() => {
                            $.post("/problem/del", {id: $.getUrlParam('ask')}, function (data) {
                                let obj = JSON.parse(data);
                                if (obj.code == 0) {
                                    this.$message({
                                        message: obj.msg,
                                        type: 'warning'
                                    });
                                } else {
                                    this.$message({
                                        message: obj.msg,
                                        type: 'success'
                                    });
                                    setTimeout(function () {
                                        window.location.href = "/";
                                    }, 1000);
                                }
                            })
                        })
                    }
                    ,
                    login() {
                        let that = this;
                        $.post('/login', {username: that.form.username, password: that.form.password}, function (data) {
                            that.userOb = data;
                            let msg = null;
                            if (that.userOb.code === '1') {
                                if (that.userOb.role === 1) {
                                    msg = '管理员:' + that.userOb.username + '  ' + that.userOb.msg;
                                } else {
                                    msg = that.userOb.msg;
                                }
                                that.$message({type: 'success', message: msg});
                                setTimeout(function () {
                                    window.location.reload();
                                }, 1000);
                            } else {
                                that.$message({type: 'error', message: that.userOb.msg});
                            }

                        }, "json");
                    },
                    exit() {
                        let that = this;
                        $.get('/user/logout', function (data) {
                            if (data === '1') {
                                that.$message({message: '已退出'});
                                setTimeout(function () {
                                    window.location.reload();
                                }, 1000);
                            } else {
                                that.$message({type: 'error', message: '退出失败'});
                            }
                        })
                    },
                    closeLoginPlane() {
                        this.showLoginWindow = false;
                    }
                }
            })
        ;

        //Html解码获取Html实体
        function htmlDecode(value) {
            return $('<div/>').html(value).text();
        }
	</script>
</div>
</body>
</html>